<template>
    <div class="box">
        <div>
            <el-form label-position="right" label-width="120px" :model="systemForm">
                <el-form-item prop="real_pay" label="平台名称:" >
                    <el-input style="width: 528px;" v-model="systemForm.real_pay" autocomplete="off" placeholder="请输入平台名称"></el-input>
                </el-form-item>
            </el-form>
            <el-form label-position="right" label-width="120px" :model="systemForm">
                <el-form-item prop="real_pay" label="平台logo:" style="text-align: left;" >
                    <el-upload
                        style="margin-left:20px ;"
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        <img v-if="systemForm.imageUrl" :src="systemForm.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <el-form label-position="right" label-width="120px" :model="systemForm">
                <el-form-item prop="real_pay" label="客服电话:" >
                    <el-input style="width: 528px;" v-model="systemForm.real_pay" autocomplete="off" placeholder="请输入客服电话"></el-input>
                </el-form-item>
            </el-form>
            <el-button class="formCancel" >取消</el-button>
            <el-button class="formConfirm" type="primary"  @click="agreeWithdraw('ruleFormLock')">确定</el-button>
        </div>
    </div>
</template>
<style>
  .avatar-uploader .el-upload {
    width: 72px;
    height: 72px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: #F0F1F6;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #165bff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: white;
    /* width: 178px;
    height: 178px; */
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<script>
    export default {
        data() {
            return {
                systemForm:{}
            }
        },
        methods: {
            agreeWithdraw(){},
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        },
    }
</script>

<style lang="less" scoped>
.box{
    width: 688px;
    height:calc(100vh - 190px) ;
}
.el-button--primary{
    width: 140px;
    height: 44px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    background:#165BFF !important;
    border: 1px solid #165BFF;
    opacity: 1;
}
.el-button--default{
    width: 140px;
    height: 44px;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #F0F1F6;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
}
.explain{
    display: inline-block;
    margin-bottom: 0px;
}
</style>
